<template>
  <view>
    <!-- 商品列表区 -->
    <view class="goods-list">
      <!-- 商品项 -->
      <view class="goods-list-item" v-for="item in goodsList" :key="item.goods_id" @click="gotoDetail(item.goods_id)">
        <!-- 左侧图片区 -->
        <view class="goods-list-item-img">
          <image :src="item.goods_small_logo || defaultImg" mode=""></image>
        </view>
        <!-- 右侧描述区 -->
        <view class="goods-list-item-right">
          <!-- 标题 -->
          <view class="goods-list-item-title">
            {{item.goods_name}}
          </view>
          <!-- 价格 -->
          <view class="goods-list-item-price">
            ¥{{item.goods_price}}
          </view>
        </view>
      </view>
    </view>
  
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 商品列表
        goodsList: [],
        // 查询对象
        queryObj: {
          // 查询字符串
          query: '',
          // 分类 id
          cid: '',
          // 页码值
          pagenum: 2,
          // 每一页的数量
          pagesize: 10,
          // 默认图片路径
          defaultImg: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
        },
        // 正在加载
        isLoading: false
      }
    },
    methods: {
      // 获取商品列表
      async getGoodsList() {
        if (!this.isLoading) {
          this.isLoading = true // 打开节流阀
          const {
              data: res
            } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
            if (res.meta.status !== 200) return uni.$showMsg
            // 拼接新旧字符串
            this.goodsList = [...this.goodsList, ...res.message.goods]
          }
          this.isLoading = false // 关闭节流阀
        },
        // 前往商品详情页
        gotoDetail (goodsId) {
          uni.navigateTo({
            url: '/subpkg/goodsDetail/goodsDetail?goods_id=' + goodsId
          })
        }
    },
    onLoad() {
      this.getGoodsList()
    },
    // 下拉刷新
    onPullDownRefresh() {
      // 清空数据
      this.goodsList = []
      this.isLoading = false
      this.queryObj.pagenum += 1
      // 获取数据完毕后,停止下拉刷新
     this.getGoodsList(() => uni.stopPullDownRefresh())
    },
    // 上拉加载更多
    onReachBottom() {
      console.log(2);
      this.pagenum += 1
      this.getGoodsList()
    }
  }
</script>

<style lang="less">
  .goods-list-item {
      display: flex;
      padding: 5rpx;
      border-bottom: 1px solid #f0f0f0;
  
      .goods-list-item-img {
        margin: auto 10rpx;
  
        image {
          width: 150rpx;
          height: 150rpx;
          display: block;
        }
      }
  
      .goods-list-item-right {
        display: flex;
        flex-direction: column;
        
        .goods-list-item-title {
          font-size: 13px;
          display: block;
          margin-bottom: 5rpx;
        }
        
        .goods-list-item-price {
          font-size: 16px;
          color: indianred;
        }
      }
    }
</style>
